<template>
  <div>
    <h3>这个是Father组件---navite--{{ num }}--{{ num2 }}</h3>
    <!-- <Son :value="num" @input="(val)=> num = val"/> -->
    <Son ref="mySon" :num="num" />
    <button @click="hClick">修改num的值</button>
  </div>
</template>
<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      num: 100,
      num2: 200
    }
  },
  methods: {
    hClick() {
      this.num = this.num + 1
      console.log(this.num, 'this.num')
      // this.refs.mySon--->子组件对象,可以调用子组件中函数或者属性
      console.log(this.$refs.mySon.num, '子组件对象')
      // dom更新是异步的
      // 解决的方法 有 $nextTick: dom更新完之后再执行$nextTick的回调函数
      // 异步分为宏任务和微任务
      // 优先级: 微任务 ---> dom的渲染---> 宏任务 setTimeout
      this.$nextTick(() => {
        console.log(this.$refs.mySon.num, 'this.$nextTick')
      })
      setTimeout(() => {
        console.log(this.$refs.mySon.num, 'setTimeout')
      }, 0)
      // 在父组件中调用子组件的方法
      this.$refs.mySon.hUpdate()
    }
  }
}
</script>
